<template>
  <div class="loading u-mask-layer" v-show="isShow">
       <div class="spinner">
           <div class="img"></div>
           <div class="text">{{text||'加载中...'}}</div>
       </div>
  </div>
</template>
<script>
  export default{
      data(){
          return{
              isShow:false,

          }
      },
      created(){
          this.$on('show',()=>{
              this.show()
          }),
          this.$on('hide',()=>{
              this.hide()
          })
      },
      props:['text'],
      methods:{
          show(){
              this.isShow=true
          },
          hide(){
              this.isShow=false
          }
      }
  }
</script>
<style lang="scss" scoped>
 .u-mask-layer {
     position: absolute;
     width:100%;
     height:100%;
     overflow: hidden;
     z-index: 10000;
     left: 0;
     top: 0;
     background: rgba(0,0,0,0.70);
     .spinner{
         width:120px;
         height:120px;
         position:relative;
         top:50%;
         left:50%;
         border-radius:5px;
         transform: translateX(-50%) translateY(-50%);
         background:#666;
         .img{
             width:50px;
             height:50px;
             margin:0 auto;
             padding-top:40px;
             background:url(./img/loading.png) center no-repeat;
             background-size:contain;
             animation:rotate 1s  infinite linear both;
         }
         .text{
              margin-top:-10px;
             font-size:16px;
             color:#fff;
             text-align: center;
         }
     }
 }

 @keyframes rotate {
       0%{
           transform:rotate(0deg)
       }
     25%{
         transform:rotate(90deg)
     }
     50%{
         transform:rotate(180deg)
     }
     75%{
         transform:rotate(270deg)
     }
     100%{
         transform:rotate(360deg)
     }
 }
</style>